<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度登录页面</title>
    <style>
        .container {
            /* border 设置上下左右4个边框 */
            border: 1px solid blue;
            width: 400px;
            height: 360px;
        }
        
        .top {
            /* margin : 外边距，0 20px: 表示上下外边距为0，左右外边距为20像素 */
            margin: 0 20px;
            cursor: pointer;
        }
        
        .top>ul {
            margin-left: -20px;
        }
        
        .top li {
            display: inline-block;
        }
        
        .login-text {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            /* padding：内边距 */
            padding: 5px;
            margin-right: 20px;
        }
        
        .message-text {
            color: #999999;
        }
        
        .text-border {
            /* border-bottom 设置下边框 */
            border-bottom: 2px solid blue;
        }
        
        .login {
            margin: 0px 20px;
        }
        
        .login-form {
            margin: 0 20px;
        }
        
        .input-text {
            /* padding : 内边距，10px 20px: 表示上下内边距为10像素，左右内边距为20像素 */
            padding: 10px 20px;
            /* border-radius 设置圆角边框 */
            border-radius: 8px;
            border: 1px solid #b8b8b8;
            /* margin-bottom 设置下外边距 */
            margin-bottom: 20px;
            width: 280px;
        }
        /* :focus 选择器，用于选取获得焦点的元素。 */
        
        .input-text:focus {
            /* outline 设置元素的外围轮廓 */
            outline: 1px solid #4e6ef2;
        }
        
        .foot {
            margin: 0 20px;
        }
        
        .remember-pwd-wrap {
            float: left;
            font-size: 14px;
            line-height: 14px;
            color: #525252;
        }
        
        .forget-pwd-wrap {
            float: right;
        }
        
        .forget-pwd-wrap>a {
            text-decoration: none;
            font-size: 14px;
            color: #4e6ef2
        }
        
        .login-btn {
            width: 100%;
            height: 48px;
            line-height: 48px;
            background: #4e6ef2;
            border-radius: 10px;
            /* box-shadow 向元素边框框添加一个或多个阴影 */
            box-shadow: 0 6px 16px 0 rgb(78 111 242 / 30%);
            font-size: 17px;
            font-weight: 800;
            border: 0;
            color: #fff;
            cursor: pointer;
            margin-top: 20px;
        }
        
        .login-btn:hover {
            background: #4662d9;
        }
        
        .tang-pass-sms-agreement {
            display: inline-block;
            margin-top: 18px;
            font-size: 14px;
            line-height: 14px;
            color: #525252;
        }
        
        .tang-pass-sms-agreement a {
            font-size: 14px;
            text-decoration: none;
            color: #4e6ef2;
            margin: 0px 2px;
        }
    </style>
</head>

<body>
    <h1>模仿百度登录页面</h1>
    <div class="container">
        <div class="top">
            <ul>
                <li class="login-text text-border">账号登录</li>
                <li class="login-text message-text">短信登录</li>
            </ul>
        </div>
        <div class="login">
            <form action="" class="login-form">
                <input type="text" class="input-text" placeholder="手机号/用户名/邮箱" name="loginAccount" required></input>
                <br>
                <input type="password" class="input-text" placeholder="密码" name="loginPassword" required></input>
                <br>
                <div style="height: 25px;">
                    <div class="remember-pwd-wrap">
                        <input type="checkbox" name="rememberPassword" id="rememberPasswordId" checked>
                        <label for="rememberPasswordId">记住密码</label>
                    </div>
                    <div class="forget-pwd-wrap">
                        <a href="">忘记密码?</a>
                    </div>
                </div>

                <button class="login-btn" type="submit">登录</button>
            </form>

        </div>
        <div class="foot">
            <div style="text-align: center;">
                <p>
                    <span class="tang-pass-sms-agreement">阅读并接受<a target="_blank" href="http://passport.baidu.com/static/passpc-account/html/protocal.html">百度用户协议</a> 和 <a target="_blank" href="http://privacy.baidu.com/policy">隐私政策</a></span>
                </p>
            </div>
        </div>
    </div>
</body>

</html>